<template>
	<div class="front_notice_list" v-loading="loading">
		<template v-if="noticeListData.length > 0">
			<div class="item" v-for="(item, index) in noticeListData" :key="index">
				<el-link :href="`/#/front/notice/${item.id}?name=${item.title}`">{{ item.title }}</el-link>
				<p class="describe">{{ $cleanHtmlTag(item.content) }}</p>
				<p class="bottom">
					<span class="el-icon-date">{{ item.releaseTime }}</span>
					<span class="el-icon-view">{{ item.browseCount }}</span>
				</p>
			</div>
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryNoticeList" />
		</template>
		<el-empty v-else :image-size="120" description="暂无公告" />
	</div>
</template>

<script>
import { queryJournalismList } from '@/api/system/tbSysJournalism';
export default {
	data() {
		return {
			dataCount: 0,
			loading: false,
			noticeListData: [],
			queryData: { page: 1, limit: 15 }
		};
	},
	mounted() {
		this.queryNoticeList();
	},
	methods: {
		async getNoticeList() {
			let params = { ...this.queryData, type: 1, del: 1 };
			let result = await queryJournalismList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.noticeListData = result.data || [];
			}
		},

		queryNoticeList() {
			this.loading = true;
			this.getNoticeList();
		}
	}
};
</script>

<style lang="scss" scoped>
.front_notice_list {
	&:has(.el-empty) {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
	}
	.item {
		padding: 16px 0;
		border-bottom: solid 1px #ebeef5;
		&:first-child {
			padding-top: 0;
		}
		.el-link {
			line-height: 1;
			font-size: 18px;
			font-weight: normal;
		}
		p.describe {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-align: justify;
			line-height: 1.75;
			overflow: hidden;
			margin: 12px 0;
			color: #606266;
		}
		p.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 1;
			color: #909399;
			span::before {
				margin-right: 6px;
			}
		}
	}
	.sw-pagination {
		margin-top: 16px;
	}
}
</style>
